import type { GoogleElements } from '../../../../../../../../types/constants/personalization/google'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { StylesService } from '../../../../../../../../types/constants/styles'

export class GoogleAdvancedPage {
  elements: GoogleElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GOOGLE]
  private static instance: GoogleAdvancedPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly stylesService: StylesService = StylesService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): GoogleAdvancedPage {
    if (!GoogleAdvancedPage.instance) {
      GoogleAdvancedPage.instance = new GoogleAdvancedPage()
    }
    return GoogleAdvancedPage.instance
  }

  init(): void {
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  hideSearchStyles(): string {
    return `
  `
  }

  getMainStyles(): string {
    return `
  .bottom-wrapper {
    /* 顶部菜单 */
    header {
      background-color: var(${this.themeVarService.search.header.background}) !important;
    }
    
    .appbar {
      color: var(${this.themeVarService.search.default.text}) !important;
      margin: 0 !important;
      padding: 25px 35px !important;
    }
    
    > div:empty {
      border-bottom: none !important;
    }
    
    div:has(> form) {
      margin: 0 auto !important;

      span, label, div {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
      
      div[role="option"] {
        color: var(${this.themeVarService.search.default.textBase}) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
      }
      
      a {
        color: var(${this.themeVarService.link.default.text}) !important;
      }
      
      form {
        padding-top: 20px !important;

        > div {
          border-top: none !important;
          
          > div {
            display: flex !important;
            align-items: center !important;
          }
        }
        
        input:not([type="submit"]) {
          ${this.stylesService.input.default}
        }
        
        select {
          ${this.stylesService.select.default}
        }
      }
    }
  }
  
  /* 页脚 */
  #footcnt {
    position: fixed !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    #fbar {
      background-color: transparent !important;
      display: flex !important;
      justify-content: center !important;
      
      span {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
      
      a {
        color: var(${this.themeVarService.link.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.textHover}) !important;
        }
      }
      
      > div {
        display: flex !important;
        
        > div {
          border-bottom: none !important;
        }
      }
    }
  }  
`
  }
}
